<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #d1{
                width: 400px;
                height: 400px;
                background-color: skyblue;
                overflow: hidden;
                position: relative;
            }

        </style>
    </head>
    <body>
    <!--     <input type="text" id="username" name="username" value=""/>
        <select name="city" id="city">
            <option value="xian">西安</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
        <script type="text/javascript">
            var inputDom = document.querySelector("#username");
            //获取焦点事件
            inputDom.onfocus = function(e){
                console.log(e);
            }
            //失去焦点事件
            inputDom.onblur = function(e){
                console.log(e);
            }
            //选项内容改变
            var selectDom = document.querySelector("#city");
            selectDom.onchange = function(e){
                console.log(e);
            } -->
        <div id="d1"></div>
        <script type="text/javascript">
            //鼠标移入事件
            var d1 =document.querySelector("#d1");
            var isDraw = false;
            d1.onmouseenter = function(e){
                console.log(e);
                d1.style.backgroundColor = "yellow";
            };
            //鼠标移出事件
            d1.onmouseleave = function(e){
                console.log(e);
                d1.style.backgroundColor = "skyblue";
            };
            //鼠标在元素上移动事件
            d1.onmousemove =function(e){
                if(isDraw){
                    console.log(e);
                    var circleDiv = document.createElement("div");
                    circleDiv.style.width = "10px";
                    circleDiv.style.height = "10px";
                    circleDiv.style.borderRadius =  "5px";
                    circleDiv.style.backgroundColor = "orange";
                    var x = e.pageX;
                    var y = e.pageY;
                    circleDiv.style.position = "absolute";
                    circleDiv.style.left = (x-5)+"px";
                    circleDiv.style.top = (y-5)+"px";
                    d1.appendChild(circleDiv);
                };
            };
            d1.onclick = function(e){
                console.log(e);
                isDraw = true;
            };

            d1.ondblclick = function(e){
                console.log(e);
                isDraw = false;
            };


        </script>
    </body>
</html>